export const addRejuCard = (editor) => {
  // ------------------------------------------------------------------------------------------------------------ 
  /*
    解决方案卡片组件
    悬浮指着解决方案卡片能横向展开信息栏
  */
  const {
    Components
  } = editor;
  Components.addType('rejuType', {
    model: {
      defaults: {
        name: 'rejuType',
        droppable: false,
        attributes:{'data-gjs-type':'rejuType'},
        components: [{
            type: 'div',
            attributes: {
              class: 'reju',
            },
            components: [{
                type: 'image',
                attributes: {
                  class: 'rejuBase',
                  src: 'https://cdn4.codesign.qq.com/prototypes/2023/08/03/xDP3923q32qn08ZwlKp03/apgsmrtqzvfi3x3v/926e15af8f4c635018a86703a0529577.jpg'
                },
              },
              {
                type: 'image',
                attributes: {
                  class: 'rejuBackground',
                  src: 'https://cdn4.codesign.qq.com/prototypes/2023/08/10/xDP3923q32qn08ZwlKp10/fs5kz6fq6ahw2el7/ff40b9b44eaaa3c28beda015384c19ab.svg'
                },
              },
              {
                type: 'image',
                attributes: {
                  class: 'rejuFocus',
                  src: 'https://cdn4.codesign.qq.com/prototypes/2023/08/10/xDP3923q32qn08ZwlKp10/fs5kz6fq6ahw2el7/877d18deb11bfa9924e97844bf012d29.svg'
                },
              },
              {
                type: 'div',
                attributes: {
                  class: 'rejuTitle'
                },
                content: `建筑行业`
              },
              {
                type: 'div',
                attributes: {
                  class: 'rejuShow'
                },
                components: [{
                    tagName: 'p',
                    components: [{
                        tagName: 'span',
                        attributes: {
                          class: 'showTitle'
                        },
                        content: `建筑行业方案`
                      },
                      {
                        tagName: 'br'
                      },
                      {
                        tagName: 'span',
                        attributes: {
                          class: 'englishTitle'
                        },
                        content: `Construction Industry`
                      },
                      {
                        tagName: 'br'
                      },
                      {
                        tagName: 'span',
                        attributes: {
                          class: 'rejuContent'
                        },
                        content: `艾三维建筑行业解决方案根据项目设计建筑行业信息化方案及建筑BIM解决方案,提供BIM咨询、BIM设计、BIM施工、数字化交付、施工动画及BIM运维等解决方案。`
                      }
                    ]
                  },
                  {
                    tagName: 'br'
                  },
                  {
                    tagName: 'button',
                    attributes: {
                      class: 'rejuButton',
                      onclick: "alert('了解详情')"
                    },
                    content: `了解详情`
                  },
                  {
                    tagName: 'button',
                    attributes: {
                      class: 'rejuSetting'
                    },
                    content: `设置数据源`
                  },
                ]
              },
            ]
          }
        ],
        styles: `.reju{display: flex;justify-content: center;font-size: medium;color: white;font-weight: bold;width: 100px;
                  height: 300px;float: left;margin: 0px 10px;transition: 0.1s;}
                  .englishTitle{font-size: 13px;font-weight: normal;color: black;}
              .rejuBase{width: 100px;height: 300px;position: absolute;}
              .rejuBackground{ width: 100px;height: 300px;position: absolute;}
              .rejuContent{font-weight: lighter;font-size: 11px;color: rgba(0, 0, 0, 0.79);}
              .rejuFocus{width: 0px;height: 300px;position: absolute;}
              .rejuTitle{position: absolute;margin-top: 1%;}
              .rejuShow{display: none;width: 200px;height: 270px;}
              .rejuShow p{font-size: 18px;color: black;}
              .rejuButton{border-radius: 3px;border: none;bottom: 0px;width: 130px;color: white;height: 30px;position: absolute;background-color: rgba(73, 140, 247, 1);font-size: 10px;}
              .rejuSetting{bottom: 0px;right: 0px;font-size: 10px;background-color: lightskyblue;position: absolute;border: none;border-radius: 3px;width: 65px;color: white;height: 30px;}
              .reju:hover{width: 300px;}
              .reju:hover .rejuBase{ width: 270px;}
              .reju:hover .rejuBackground{display: none;}
              .reju:hover .rejuFocus{ width: 270px;}
              .reju:hover .rejuTitle{ display: none;}
              .reju:hover .rejuShow{ display: inherit;position: absolute;margin-top: 1%;z-index: 10;}`,
        script() {
          // 元素监听-搜索框获取焦点事件
          var thx = document.getElementById(this.attributes.id.value);
          thx.getElementsByClassName('rejuSetting')[0].onclick = function () {
            var setting = prompt("请输入数据源后端接口,注意数据源只能设置一次！", "");
            if (setting) {
              var xmlhttp = new XMLHttpRequest();
              xmlhttp.onreadystatechange = function () {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                  var result = JSON.parse(xmlhttp.response);
                  thx.getElementsByClassName('rejuBase')[0].src = result.data.coverImageUrl;
                  thx.getElementsByClassName('rejuBackground')[0].src = result.data.backgroundImageUrl;
                  thx.getElementsByClassName('rejuTitle')[0].innerText = result.data.title.substring(0, 4);
                  thx.getElementsByClassName('rejuContent')[0].innerText = result.data.text;
                  thx.getElementsByClassName('englishTitle')[0].innerText = result.data.englishTitle;
                  thx.getElementsByClassName('showTitle')[0].innerText = result.data.title;
                  thx.getElementsByClassName('rejuSetting')[0].hidden = true;
                };
              }
              xmlhttp.open("GET", setting, true);
              xmlhttp.send();
            }
          }
        }
      },
      init() {
        // this.addClass(`.reju{display: flex;justify-content: center;font-size: medium;color: white;font-weight: bold;width: 100px;
        //           height: 300px;float: left;margin: 0px 10px;transition: 0.1s;}
        //       .rejuBase{width: 100px;height: 300px;position: absolute;}
        //       .rejuBackground{ width: 100px;height: 300px;position: absolute;}
        //       .rejuFocus{width: 0px;height: 300px;position: absolute;}
        //       .rejuTitle{position: absolute;margin-top: 1%;}
        //       .rejuShow{display: none;width: 200px;height: 270px;}
        //       .rejuButton{border-radius: 3px;border: none;bottom: 0px;width: 130px;color: white;height: 30px;position: absolute;background-color: rgba(73, 140, 247, 1);font-size: 10px;}
        //       .rejuSetting{bottom: 0px;right: 0px;font-size: 10px;background-color: lightskyblue;position: absolute;border: none;border-radius: 3px;width: 65px;color: white;height: 30px;}`)
      }
    }
  });
  // 注册组件
  editor.Blocks.add('reju', {
    label: '解决方案卡片',
    category: '产品中心组件',
    content: {
      type: 'rejuType',

    },
    media:`<svg t="1720767562127" class="icon" viewBox="0 0 1099 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12645" height="30" width="30"><path d="M31.372401 582.363813L497.961154 790.972107c41.183846 19.380634 59.110932 19.380634 103.686389 0l466.588753-208.584068c23.135631-10.780477 31.372401-61.048996 31.372401-87.939625-30.039982 15.019991-72.556247 36.217559-73.283021 36.338688L549.683219 749.279519 73.283021 530.884005c1.695805 0.969032-42.152878-18.65386-73.283021-36.338688C0 520.854527 6.540964 569.306111 31.372401 582.363813"  p-id="12646"></path><path d="M549.683219 967.917292L73.283021 749.279519c1.695805 0.969032-42.152878-18.65386-73.283021-36.338688 0 26.406113 6.783222 74.857697 31.372401 87.939625l466.588753 208.584069c41.183846 19.380634 59.110932 19.380634 103.686389 0l466.346495-208.584069c23.135631-10.780477 31.372401-61.048996 31.372401-87.939625-30.039982 15.019991-72.313989 36.217559-73.283021 36.338688l-476.400199 218.637773"  p-id="12647"></path><path d="M1067.994038 260.766425L601.647543 15.746765c-36.580946-21.560955-62.502543-20.349665-103.686389 0L31.372401 260.766425c-35.611914 22.651115-36.580946 83.700111 0 102.959615l466.588753 208.705198c41.183846 19.259505 59.110932 19.259505 103.686389 0l466.588753-208.705198c34.158367-15.989023 35.369656-83.457853-0.242258-102.959615z m-518.310819 251.221462L73.283021 312.367361l476.521327-254.855331 476.521328 254.855331-476.642457 199.620526z"  p-id="12648"></path></svg>`
  });

}